<template>
	<view class="page">
		<view class="form-title">
			地区信息
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">
					学历
				</view>
				<view class="value">
					<input placeholder="请输入"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					婚姻状况
				</view>
				<view class="value">
					<input placeholder="请输入"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					资金
				</view>
				<view class="value">
					<input placeholder="请输入"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					政府方面关系
				</view>
				<view class="value">
					<input placeholder="请输入"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					地产方面关系
				</view>
				<view class="value">
					<input placeholder="请输入"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>*</text>户籍所在地
				</view>
				<view class="value">
					<view class="form-picker">
						请选择
						<u-icon name="arrow-right" size="25rpx" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>*</text>常住地
				</view>
				<view class="value">
					<view class="form-picker">
						请选择
						<u-icon name="arrow-right" size="25rpx" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>*</text>是否从事过家居建材行业
				</view>
				<view class="value">
					<view class="form-picker">
						请选择
						<u-icon name="arrow-right" size="25rpx" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>*</text>从事过家居建材行业年限
				</view>
				<view class="value">
					<view class="form-picker">
						请选择
						<u-icon name="arrow-right" size="25rpx" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>*</text>信息来源
				</view>
				<view class="value">
					<input placeholder="请输入"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					推荐人姓名
				</view>
				<view class="value">
					<input placeholder="请输入"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>*</text>已与华耐合作的品牌
				</view>
				<view class="value">
					<input placeholder="请输入"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>*</text>初次拜访时间
				</view>
				<view class="value">
					<view class="form-picker">
						请选择
						<u-icon name="arrow-right" size="25rpx" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>*</text>拜访方式
				</view>
				<view class="value">
					<view class="form-picker">
						请选择
						<u-icon name="arrow-right" size="25rpx" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>*</text>拜访方式
				</view>
				<view class="value">
					<input placeholder="请输入"/>
				</view>
			</view>
		</view>
		<view class="footer-bar">
			<view class="footer-btn">
				取消
			</view>
			<view class="footer-btn fill">
				确定
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	uni-page-body{
		min-height: 100%;
		background: #F5F5F5;
	}
	.page{
		padding-bottom: 120rpx;
	}
	.form-title{
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		display: flex;
		align-items: center;
		padding: 38rpx 30rpx;
	}
	.form-title::before{
		content: "";
		display: inline-block;
		width: 8rpx;
		height: 24rpx;
		background: #3481F5;
		margin-right: 9rpx;
	}
	.form-title .form-title-btn-bar{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
	}
	.form-title .form-title-btn{
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		color: #307DCD;
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}
	.form-title .form-title-btn:last-child{
		margin-right: 0;
	}
	.form-title .form-title-btn .u-icon{
		margin-right: 10rpx;
	}
	.form{}
	.form-item{
		border-bottom: 1px solid #F5F5F5;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}
	.form-item .label{
		line-height: 100rpx;
		flex: 0 0 auto;
	}
	.form-item .label text{
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		color: #F04134;
	}
	.form-item .value{
		flex: 1;
	}
	.form-item .value input{
		height: 100rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		text-align: right;
	}
	.form-picker{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
		line-height: 100rpx;
		width: 100%;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
	}
	.form-picker .u-icon{
		margin-left: 10rpx;
	}
	.area-picker{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.area-picker-item{
		padding: 0 24rpx;
		line-height: 50rpx;
		background: #F5F5F5;
		border-radius: 25rpx;
		margin-right: 20rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		color: #999999;
		display: flex;
		align-items: center;
	}
	.area-picker-item:last-child{
		margin-right: 0;
	}
	.area-picker-item .u-icon{
		margin-left: 22rpx
	}
	.form-table{
		background: #FFFFFF;
		padding: 14rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
	}
	.form-tabel-container{
		overflow: auto;
		border-left: 1px solid #EDEFF2;
		border-right: 1px solid #EDEFF2;
	}
	.form-table-header{
		display: flex;
		align-items: center;
		
	}
	.form-table-header .form-table-col{
		background: #EDEFF2;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		color: #666666;
		text-align: center;
		min-height: 72rpx;
		line-height: 30rpx;
		flex: 1;
		border-right: 1px solid #EDEFF2;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.form-table-header .form-table-col:last-child{
		border-right: none
	}
	.form-table-row{
		display: flex;
	}
	
	.form-table-row .form-table-col{
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		min-height: 97rpx;
		line-height: 30rpx;
		text-align: center;
		flex: 1;
		border-right: 1px solid #EDEFF2;
		border-bottom: 1px solid #EDEFF2;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
	}
	.form-table-row .form-table-col:last-child{
		border-right: none
	}
	.score{
		text-align: center;
		background-color: #FFFFFF;
		padding: 40rpx 0;
	}
	.score .value{
		font-size: 48rpx;
		font-family: DINNextLTPro;
		font-weight: 500;
		color: #333333;
	}
	.score .label{
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		color: #333333;
	}
	.form-btn-bar{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.form-btn{
		margin-right: 15rpx;
	}
	.form-btn:last-child{
		margin-right: 0;
	}
	.form-btn image{
		vertical-align: top;
		width: 55rpx;
		height: auto;
	}
	
	.footer-bar{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
	}
	.footer-btn{
		line-height: 100rpx;
		background: #FFFFFF;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #5378AC;
		text-align: center;
		flex: 1;
		border-top: 1px solid #DCDCDC;
	}
	.footer-btn.fill{
		color: #FFFFFF;
		background: #307DCD;
		border-top: 1px solid #307DCD;
	}
</style>